<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>javascript懒加载</title>
</head>

<body>
    <div class="container">
        <img src="../../static/images/apple_1_bigger.jpg" data-src="1.jpg">
        <img src="apple_1_bigger.jpg" data-src="2.jpg">
        <img src="apple_1_bigger.jpg" data-src="3.jpg">
        <img src="apple_1_bigger.jpg" data-src="4.jpg">
        <img src="apple_1_bigger.jpg" data-src="5.jpg">
    </div>
    <script>
        var imgs = document.querySelectorAll('img');
        function lozyLoad() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var winHeight = window.innerHeight;
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].offsetTop < scrollTop + winHeight) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
        window.onscroll = lozyLoad();
    </script>
</body>

</html>